<script setup>
import { ref, onMounted } from "vue"
import { poemLines } from "../utils/poem"
// 诗词和打字机效果
const currentPoemIndex = ref(Math.floor(Math.random() * 113) % 113)
const currentPoemLine = ref("")
const typingSpeed = 100
const erasingSpeed = 50
const newLineDelay = 3000

// 打字机效果函数
const typeEffect = () => {
  const currentLine = poemLines[currentPoemIndex.value]
  if (currentPoemLine.value.length < currentLine.length) {
    currentPoemLine.value += currentLine[currentPoemLine.value.length]
    setTimeout(typeEffect, typingSpeed)
  } else {
    setTimeout(eraseEffect, newLineDelay)
  }
}

// 擦除效果函数
const eraseEffect = () => {
  if (currentPoemLine.value.length > 0) {
    currentPoemLine.value = currentPoemLine.value.substring(0, currentPoemLine.value.length - 1)
    setTimeout(eraseEffect, erasingSpeed)
  } else {
    currentPoemIndex.value = (currentPoemIndex.value + 1) % poemLines.length
    setTimeout(typeEffect, 1000)
  }
}

// 百度搜索
const toSearch = () => {
  if (currentPoemLine.value.length > 3) {
    const url = "https://www.baidu.com/s?ie=UTF-8&wd=" + poemLines[currentPoemIndex.value]
    window.open(url, "_blank")
  }
}

onMounted(() => {
  setTimeout(typeEffect, 1000)
})
</script>

<template>
  <div class="poetize-section">
    <div class="poetize-overlay"></div>
    <div class="poem-container">
      <div class="poem-line" @click="toSearch()" title="去搜索">
        {{ currentPoemLine }}<span class="cursor"></span>
      </div>
      <div class="poem-title">光尘录</div>
    </div>
  </div>
</template>

<style scoped>
.poetize-section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 60px 20px;
  transition: var(--transition);
}

.poetize-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
  transition: var(--transition);
}

.day-theme .poetize-overlay {
  background: radial-gradient(circle at center, rgba(255, 167, 38, 0.15), rgba(76, 175, 80, 0.1));
}

.night-theme .poetize-overlay {
  background: radial-gradient(circle at center, rgba(126, 87, 194, 0.15), rgba(41, 182, 246, 0.1));
}

.poem-container {
  padding: 40px;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  position: relative;
  opacity: 0.8;
  overflow: hidden;
  transition: var(--transition);
}

.poem-container::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.1) 50%,
    transparent 100%
  );
  z-index: -1;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.poem-line {
  font-size: 30px;
  margin-bottom: 18px;
  color: var(--text);
  letter-spacing: 1px;
  line-height: 1.6;
}

.poem-line:hover {
  cursor: pointer;
}

.poem-title {
  color: var(--primary);
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  transition: var(--transition);
}

.poem-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  transition: var(--transition);
}

.cursor {
  display: inline-block;
  width: 3px;
  height: 36px;
  background: var(--secondary);
  margin-left: 4px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .poem-line {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .poem-line {
    font-size: 22px;
  }
}
</style>
